<script setup>
/**
 * @import libs
 */
import { ref } from 'vue'
import { storeToRefs } from 'pinia'

/**
 * @import pinia stores
 */

// pinia -> useShoppingPageStore
import { useShoppingPageStore } from '@/stores/shopping/shoppingPage.js'

/**
 * @param searchValue 搜索框输入值
 */
let { searchValue } = storeToRefs(useShoppingPageStore())

/**
 * @function onSearchInput 购物输入框输入
 */
const { onSearchInput } = useShoppingPageStore()

/**
 * 搜索框占位内容
 */
const placeholder = ref('找你想要的商品')

/**
 * 购物输入框输入事件
 */

const onSearchInputEvent = (e) => {
    let value = e?.detail?.value

    // 参数是否存在判断
    if (value === undefined) {
        return
    }

    //参数类型判断
    if (typeof value !== 'string') {
        console.error('value is not a string')
        return
    }    
    
    value = value.trim()

    onSearchInput(value)
}

</script>

<template>
    <div class="search-bar-class">
        <div>
            <image class="img-class" src="@/static/icons/shopping_search.svg" mode="scaleToFill" />
        </div>
        <div>
            <input class="input-class" v-model="searchValue" @input="onSearchInputEvent" :placeholder="placeholder"
                placeholder-style=" color: #f2cb9c ; font-size: 25rpx;" />
        </div>
    </div>
</template>

<style scoped>
.search-bar-class {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #ffffff;
    width: 680rpx;
    height: 70rpx;
    margin: 0 auto;
    margin-top: 28rpx;
    border-radius: 15rpx;
}

.img-class {
    width: 30rpx;
    height: 30rpx;
    margin-left: 30rpx;
    position: relative;
    top: 5rpx;
}

.input-class {
    width: 550rpx;
    height: 70rpx;
    margin-left: 10rpx;
    border: none;
    color: #eba857;

}
</style>